<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">


<!-- partial:partials/_navbar.html -->
<nav class="navbar col-lg-12 col-12 p-0 fixed-top d-flex flex-row" th:fragment="navbar">
    <div class="navbar-brand-wrapper d-flex justify-content-center">
        <div class="navbar-brand-inner-wrapper d-flex justify-content-between align-items-center w-100">
            <a class="navbar-brand brand-logo" href="../index.html"><img alt="logo" th:src="@{/images/logo.svg}"/></a>
            <a class="navbar-brand brand-logo-mini" href="../index.html"><img th:src="@{/images/logo-mini.svg}"
                                                                              alt="logo"/></a>
            <button class="navbar-toggler navbar-toggler align-self-center" type="button" data-toggle="minimize">
                <span class="mdi mdi-sort-variant"></span>
            </button>
        </div>
    </div>
    <div class="navbar-menu-wrapper d-flex align-items-center justify-content-end">
        <ul class="navbar-nav mr-lg-4 w-100">
            <li class="nav-item nav-search d-none d-lg-block w-100">
                <div class="input-group">
                    <div class="input-group-prepend">
                <span class="input-group-text" id="search">
                  <i class="mdi mdi-magnify"></i>
                </span>
                    </div>
                    <input type="text" class="form-control" placeholder="Search now" aria-label="search"
                           aria-describedby="search">
                </div>
            </li>
        </ul>
        <ul class="navbar-nav navbar-nav-right">
            <li class="nav-item dropdown mr-1">
                <a class="nav-link count-indicator dropdown-toggle d-flex justify-content-center align-items-center"
                   id="messageDropdown" href="#" data-toggle="dropdown">
                    <i class="mdi mdi-message-text mx-0"></i>
                    <span class="count"></span>
                </a>
                <div class="dropdown-menu dropdown-menu-right navbar-dropdown" aria-labelledby="messageDropdown">
                    <p class="mb-0 font-weight-normal float-left dropdown-header">Messages</p>
                    <a class="dropdown-item">
                        <div class="item-thumbnail">
                            <img th:src="@{/images/faces/face4.jpg}" alt="image" class="profile-pic">
                        </div>
                        <div class="item-content flex-grow">
                            <h6 class="ellipsis font-weight-normal">David Grey
                            </h6>
                            <p class="font-weight-light small-text text-muted mb-0">
                                The meeting is cancelled
                            </p>
                        </div>
                    </a>
                    <a class="dropdown-item">
                        <div class="item-thumbnail">
                            <img th:src="@{/images/faces/face2.jpg}" alt="image" class="profile-pic">
                        </div>
                        <div class="item-content flex-grow">
                            <h6 class="ellipsis font-weight-normal">Tim Cook
                            </h6>
                            <p class="font-weight-light small-text text-muted mb-0">
                                New product launch
                            </p>
                        </div>
                    </a>
                    <a class="dropdown-item">
                        <div class="item-thumbnail">
                            <img th:src="@{/images/faces/face3.jpg}" alt="image" class="profile-pic">
                        </div>
                        <div class="item-content flex-grow">
                            <h6 class="ellipsis font-weight-normal"> Johnson
                            </h6>
                            <p class="font-weight-light small-text text-muted mb-0">
                                Upcoming board meeting
                            </p>
                        </div>
                    </a>
                </div>
            </li>
            <li class="nav-item dropdown mr-4">
                <a class="nav-link count-indicator dropdown-toggle d-flex align-items-center justify-content-center notification-dropdown"
                   id="notificationDropdown" href="#" data-toggle="dropdown">
                    <i class="mdi mdi-bell mx-0"></i>
                    <span class="count"></span>
                </a>
                <div class="dropdown-menu dropdown-menu-right navbar-dropdown" aria-labelledby="notificationDropdown">
                    <p class="mb-0 font-weight-normal float-left dropdown-header">Notifications</p>
                    <a class="dropdown-item">
                        <div class="item-thumbnail">
                            <div class="item-icon bg-success">
                                <i class="mdi mdi-information mx-0"></i>
                            </div>
                        </div>
                        <div class="item-content">
                            <h6 class="font-weight-normal">Application Error</h6>
                            <p class="font-weight-light small-text mb-0 text-muted">
                                Just now
                            </p>
                        </div>
                    </a>
                    <a class="dropdown-item">
                        <div class="item-thumbnail">
                            <div class="item-icon bg-warning">
                                <i class="mdi mdi-settings mx-0"></i>
                            </div>
                        </div>
                        <div class="item-content">
                            <button type="button" class="btn btn-secondary btn-block"
                                    onclick="addDeviceBTN()">添加设备
                            </button>
                            <button type="button" class="btn btn-secondary btn-block"
                                    onclick="addDeviceBTN()">历史消息
                            </button>
                            <button type="button" class="btn btn-secondary btn-block"
                                    onclick="addDeviceBTN()">我的发送
                            </button>
                        </div>
                    </a>
                    <a class="dropdown-item">
                        <div class="item-thumbnail">
                            <div class="item-icon bg-info">
                                <i class="mdi mdi-account-box mx-0"></i>
                            </div>
                        </div>
                        <div class="item-content">
                            <h6 class="font-weight-normal">New user registration</h6>
                            <p class="font-weight-light small-text mb-0 text-muted">
                                2 days ago
                            </p>
                        </div>
                    </a>
                </div>
            </li>
            <li class="nav-item dropdown mr-1">
                <a class="nav-link count-indicator dropdown-toggle d-flex align-items-center justify-content-center notification-dropdown"
                   id="" href="#" data-toggle="dropdown">
                    <i class="mdi mdi-bell mx-0"></i>
                    <span class="count"></span>
                </a>
                <div class="dropdown-menu dropdown-menu-right navbar-dropdown" aria-labelledby="notificationDropdown">
                    <p class="mb-0 font-weight-normal float-left dropdown-header">Notifications</p>
                    <a class="dropdown-item">
                        <div class="item-thumbnail">
                            <div class="item-icon bg-success">
                                <i class="mdi mdi-information mx-0"></i>
                            </div>
                        </div>
                        <div class="item-content">
                            <h6 class="font-weight-normal">Application Error</h6>
                            <p class="font-weight-light small-text mb-0 text-muted">
                                Just now
                            </p>
                        </div>
                    </a>
                </div>
            </li>
            <li class="nav-item nav-profile dropdown">
                <a class="nav-link dropdown-toggle" href="#" data-toggle="dropdown" id="profileDropdown">
                    <img th:src="@{/images/faces/face5.jpg}" alt="profile"/>
                    <span class="nav-profile-name" th:text="${session.loginUser.user_name}"></span>
                </a>
                <div class="dropdown-menu dropdown-menu-right navbar-dropdown" aria-labelledby="profileDropdown">
                    <a class="dropdown-item">
                        <i class="mdi mdi-settings text-primary"></i>
                        Settings
                    </a>
                    <a class="dropdown-item" th:href="@{/logout}">
                        <i class="mdi mdi-logout text-primary"></i>
                        Logout
                    </a>
                </div>
            </li>
        </ul>
        <button class="navbar-toggler navbar-toggler-right d-lg-none align-self-center" type="button"
                data-toggle="offcanvas">
            <span class="mdi mdi-menu"></span>
        </button>
    </div>
</nav>


<!-- partial:partials/_sidebar.html -->
<nav class="sidebar sidebar-offcanvas" id="sidebar" th:fragment="siderbar">
    <ul class="nav">
        <li class="nav-item">
            <a class="nav-link" href="/">
                <i class="mdi mdi-home menu-icon"></i>
                <span class="menu-title">Dashboard</span>
            </a>
        </li>

        <li class="nav-item">
            <label class="badge badge-danger">在线数量:
                <span id="onLine_sum">0</span></label>
        </li>

        <li class="nav-item">
            <div id="timeChart">

            </div>
        </li>
        <li class="nav-item">

            <a class="nav-link" data-toggle="collapse" th:href="@{#device-online}" aria-expanded="false"
               aria-controls="ui-basic">
                <i class="mdi mdi-circle-outline menu-icon"></i>
                <span class="menu-title">在线设备</span>
                <i class="menu-arrow"></i>
            </a>
            <div class="collapse" id="device-online">
                <!--/*@thymesVar id="deviceOnLines" type="java.util.List<xyz.blue.pojo.Device>"*/-->
                <!--/*@thymesVar id="deviceOnline" type="xyz.blue.pojo.Device"*/-->
                <!--                <ul class="nav flex-column sub-menu" th:each="deviceOnline: ${deviceOnLines}">-->
                <!--                    <li class="nav-item"> &lt;!&ndash;/*@thymesVar id="getDevice_name" type="xyz.blue.pojo.Device"*/&ndash;&gt;-->
                <!--                        <a class="nav-link" th:href="@{'#'+${deviceOnline.getDevice_name()}}"-->
                <!--                           th:alt="${deviceOnline.getDevice_name()}">Buttons</a></li>-->
                <!--                </ul>-->
            </div>
        </li>

        <li class="nav-item">

            <a class="nav-link" data-toggle="collapse" th:href="@{#device-all}" aria-expanded="false"
               aria-controls="ui-basic">
                <i class="mdi mdi-circle-outline menu-icon"></i>
                <span class="menu-title mdi-48px">所有设备</span>
                <i class="menu-arrow"></i>
            </a>

            <div class="collapse" id="device-all">
                <ul id="AllDeviceMenu" class="table table-bordered">

                </ul>
            </div>
        </li>

        <!--我的发送-->
        <li class="nav-item">

            <a class="nav-link" data-toggle="collapse" th:href="@{#my_his_msg}" aria-expanded="false"
               aria-controls="ui-basic">
                <i class="mdi mdi-circle-outline menu-icon"></i>
                <span class="menu-title mdi-48px">我的发送</span>
                <i class="menu-arrow"></i>
            </a>

            <div class="collapse" id="my_his_msg">

            </div>
        </li>
        <!--添加设备-->
        <li class="nav-item">

            <a class="nav-link" data-toggle="collapse" th:href="@{#addDevice}" aria-expanded="false"
               aria-controls="ui-basic">
                <i class="mdi mdi-circle-outline menu-icon"></i>
                <span class="menu-title mdi-48px">添加设备</span>
                <i class="menu-arrow"></i>
            </a>
            <div class="card" id="addDevice">
                <form class="forms-sample" name="AddDevice">
                    <div class="form-group row">
                        <div class="col-sm-9">
                            <label for="device_name">设备名称</label>
                            <input type="text" class="form-control" id="device_name" placeholder="设备名称">
                        </div>
                    </div>
                    <div class="form-group row">
                        <div class="col-sm-9">
                            <label for="device_mac">设备MAC</label>
                            <input type="text" class="form-control" id="device_mac"
                                   placeholder="设备MAC">
                        </div>
                    </div>
                    <button type="button" onclick="addDevice()" class="btn btn-primary btn-block ">添加</button>

                </form>
            </div>
        </li>
        <!--历史消息-->
        <li class="nav-item">
            <a class="nav-link" data-toggle="collapse" th:href="@{#his_msg}" aria-expanded="false"
               aria-controls="ui-basic">
                <i class="mdi mdi-circle-outline menu-icon"></i>
                <span class="menu-title mdi-48px">历史消息</span>
                <i class="menu-arrow"></i>
            </a>

            <div class="collapse" id="his_msg">

            </div>
        </li>
        <!--           <li class="nav-item" th:each="device: ${device}">
                       <a class="nav-link">
                           <i class="mdi mdi-view-headline menu-icon"></i>
                           <span class="menu-title" th:text="${device.getDevice_name()}">device_name</span>
                       </a>
                   </li>
                   <li class="nav-item">
                       <a class="nav-link" data-toggle="collapse" th:href="@{#msg_history}" aria-expanded="false"
                          aria-controls="ui-basic">
                           <i class="mdi mdi-circle-outline menu-icon"></i>
                           <span class="menu-title mdi-48px">消息记录</span>
                           <i class="menu-arrow"></i>
                       </a>
                       <div class="card col" >
                           <div class="card-header">
                           </div>
                           <div class="card-body" id="msg_history">
                           </div>
                       </div>

                   </li>-->


    </ul>

</nav>
<!-- partial:../../partials/_footer.html -->


<footer class="footer" th:fragment="footer">
    <div class="d-sm-flex justify-content-center justify-content-sm-between">
                    <span class="text-muted text-center text-sm-left d-block d-sm-inline-block">Copyright © 2018 <a
                            href="https://www.urbanui.com/" target="_blank">Urbanui</a>. SSSAll rights reserved.</span>
        <span class="float-none float-sm-right d-block mt-1 mt-sm-0 text-center">Hand-crafted & made with <i
                class="mdi mdi-heart text-danger"></i></span>
    </div>
</footer>

<!-- partial -->

</html>